<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="div">
      <div>1111</div>
      <div class="dad">
        2222
        <div class="son">3333</div>
        <div>4444</div>
      </div>
    </div>
    <script>
      //子关系
      // var getdiv = document.querySelector(".div")
      // var childrens = getdiv.children
      // console.log(childrens)
      // var nodes = getdiv.childNodes
      // console.log(nodes);
      // console.log(getdiv.firstElementChild);
      // console.log(getdiv.firstChild)
      // console.log(getdiv.lastChild)
      // console.log(getdiv.lastElementChild);

      //父关系和兄弟关系
      var son = document.querySelector(".son");
      var dad = document.querySelector(".dad");
      //父元素 parentElement
      console.log(son.parentElement);
      console.log(son.parentElement.parentElement);
      console.log(son.parentNode);
    </script>
  </body>
</html>
